<template>
    <div class="wrapper">
        <h1>WatchEffect</h1>
        <h2>当前水温：{{ temp }}℃</h2>
        <h2>当前水位：{{ height }}cm</h2>
        <button @click="changeTemp">水温+10</button>
        <button @click="changeHeight">水位+10</button>
    </div>
</template>

<script lang="ts" setup name="WatchEffect">

import { ref, watch, watchEffect } from 'vue'

let temp = ref(10)
let height = ref(0)

function changeTemp() {
    temp.value += 10
}
function changeHeight() {
    height.value += 10
}

// watch实现
// watch([temp, height], (newV, oldV) => {
//     const [nt, nh] = newV
//     if (nt >= 30 || nh >= 30) {
//         console.log(' 给服务器发请求 ');
//     }
// })

// watchEffect实现
watchEffect(() => {
    // console.log('watchEffect :>> ');
    // console.log('temp.value :>> ', temp.value);
    // console.log('height.value :>> ', height.value);    
    if (temp.value >= 30 || height.value >= 30) { // TODO bug??
        console.log(' 给服务器发请求 ');
    }
    // const tv = temp.value
    // const hv = height.value
    // if (tv >= 30 || hv >= 30) {
    //     console.log(' 给服务器发请求 ');
    // }
})

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>